<template>
    <div class='swiper-container'>
   <swiper class='j-swiper' autoplay interval="5000" duration="800" @change="itemChange" indicator-dots  circular> 
    <swiper-item class="j-swiper-item" v-for="(item,index) of slides" :key="index" @click="itemClicked(item)"> 
      <div class="swiper-item-wrapper">
        <span class="item-title">{{item.title}}</span> 
       <img :src="item.imgUrl" alt="">
      </div>
    </swiper-item> 
   </swiper> 
   </div> 
</template>

<script>
export default {
  props: {
    slides: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    
  },
  methods: {
    itemChange() {
      console.log(7888)
    },
    itemClicked(item) {
      console.error(item)
    }
  }
}
</script>

<style>
.swiper-container {
  width: 100%;
  height: 200rpx;
}
.j-swiper {
   width: 100%;
  height: 100%;
  padding: 6rpx 12rpx;
    overflow: hidden;
  box-sizing: border-box;
}
.j-swiper-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-item-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  overflow: hidden;
}

.item-title {
  position: absolute;
}

.j-swiper-item img {
  width: 100%;
  height: 100%;
}
</style>
